<template>
	<template v-for="(item, index) in list" :key="index" >
		<slot name="item" :item="item" :index="index"> </slot>
	</template>
	<template v-if="(showLoadmore==1) || (showLoadmore==2 && list.length>0)">
	<!-- width: 750rpx;min-height: 100rpx;display: flex;align-items: center; -->
		<view class="list_flex" :style="{width:'100%'}">
			<u-loadmore :status="loadmoreStatus" fontSize="24rpx" v-if="list.length>0" :loading-text="loadingText"
				:loadmore-text="loadmoreText" :nomore-text="nomoreText"></u-loadmore>
			<u-empty :icon="icon" :text="text" v-else></u-empty>
		</view>
	</template>
</template>

<script>
	var systemInfo = uni.getSystemInfoSync()
	export default {
		props: {
			show:{
				type:Boolean,
				default:false
			},
			componentName: {
				type: String,
				default: ""
			},
			className: {
				type: String,
				default: "u-flex u-flex-wrap u-row-between popular_ul"
			},
			slotName: {
				type: String,
				default: 'sold_num',
			},
			text: {
				type: String,
				default: "no more~"
			},
			loadingText: {
				type: String,
				default: "loading..."
			},
			loadmoreText: {
				type: String,
				default: "load more~"
			},
			nomoreText: {
				type: String,
				default: "no more~"
			},
			reqData: {
				type: Object,
				default: () => {}
			},
			reqUrl: {
				type: String,
				default: ""
			},
			showLoadmore: { //显示更多 1-一致显示 2-有数据才显示
				type: [Number],
				default: 1,
			},
			eachItem: {
				type: [Function, undefined],
				default: undefined
			},
			itemClick: {
				type: [Function, undefined],
				default: undefined
			},
			dataChange: {
				type: Function,
				default: (res, list) => {}
			},
			initData: {
				type: Function,
				default: (is_reset) => {}
			},
			icon: {
				type: String,
				default: ""
			},
		},
		emits: ['dataChanged', 'completeFnc'],
		data() {
			return {
				// loadmore / loading / nomore
				loadmoreStatus: "loadmore",
				total: 0,
				total_page: false,
				list: [],
				listQuery: {
					page: 1,
				},
				m_width:systemInfo.screenWidth,
			}
		},
		mounted() {
			// console.log(this.list,'000’')
		},
		methods: {
			setList(list) {
				this.list = list
			},
			setIndexItem(index, data) {
				const item = this.list[index]
				this.$set(this.list, index, {
					...item,
					...data
				})
			},
			getData(is_rest) {
				if (is_rest !== true) {
					if(this.loadmoreStatus === 'nomore' || !this.list.length){
						return
					}
				}

				if (is_rest === true) {
					this.listQuery.page = 1;
					this.total_page = false;
					this.list = [];
				}
				this.loadmoreStatus = "loading";
				uni.$network(this.reqUrl, {
					...this.listQuery,
					...this.reqData
				}, () => {
					this.$emit('completeFnc')
				}).then((res) => {
					const data = res.data || {};
					const list = data.list || []
					const total = data.total || 0;
					const total_page = data.total_page || 0;
					if (this.eachItem) {
						list.map(this.eachItem)
					}
					if (is_rest) {
						this.list = list
						this.listQuery.page = 2;
					} else {
						this.list = this.list.concat(list);
						this.listQuery.page++;
					}
					this.total = total || 0;
					this.total_page = total_page || 0;

					this.loadmoreStatus = this.listQuery.page > total_page ? "nomore" : "loadmore";
					this.$emit('dataChanged')
					this.dataChange(res, this.list)
				}).catch(err => {
					this.loadmoreStatus = "loadmore";
				})
			},
			addElement_start(item) {
				return this.list.unshift(item)
			},
			addElement_end(item) {
				return this.list.push(item)
			},
			getItemIndex(item) {
				return this.list.indexOf(item)
			},
			onDelData(item) {
				const index = this.list.indexOf(item)
				console.log('++++ondeldata', index)
				this.list.splice(index, 1)
				this.$emit('dataChanged')
				this.dataChange({}, this.list)
			},
			onDelIndexData(index) {
				console.log('++++ondeldata', index)
				this.list.splice(index, 1)
				this.$emit('dataChanged')
				this.dataChange({}, this.list)
			},
			onSetDataContent({
				obj,
				field,
				value
			}) {
				this.list.map(function(item) {
					item[field] = value
				})
			},
			onInitData() {
				this.getData(true)
			}
		}
	}
</script>

<style lang="scss" scoped>
.list_box{
	width: 100%;
	&.show{
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}
}
.list_flex{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100rpx;
}
.list_item{
	width: 100%;
	&.show{
		width: 49%;
	}
}
</style>
